---
import Icon from '../Icon.astro';
---

<div class='relative block hidden' id='account-dropdown'>
  <button
    class='flex h-8 w-28 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 to-purple-700 py-2 px-4 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600'
    type='button'
    data-account-button
  >
    <span class='flex items-center gap-1'>
      Account
      <Icon icon='chevron-down' class='h-3 w-3 stroke-[3px]' />
    </span>
  </button>

  <div
    class='absolute right-0 z-10 mt-2 hidden w-48 rounded-md bg-slate-800 py-1 shadow-xl'
  >
    <ul>
      <li class='px-1'>
        <a
          href='/settings/profile'
          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
        >
          Settings
        </a>
      </li>
      <li class='px-1'>
        <button
          class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
          type='button'
          data-logout-button
        >
          Logout
        </button>
      </li>
    </ul>
  </div>
</div>

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../../lib/constants';

  const accountButton = document.querySelector('[data-account-button]');
  const accountMenu = accountButton?.nextElementSibling;
  const logoutButton = accountMenu?.querySelector('[data-logout-button]');

  accountButton?.addEventListener('click', () => {
    accountMenu?.classList.toggle('hidden');
  });

  logoutButton?.addEventListener('click', () => {
    Cookies.remove(TOKEN_COOKIE_NAME);
    window.location.reload();
  });
</script>
